<p ng-if="!ctrl.appModel.jsonData.apiKeySet">worldPing requires a Grafana.com account. <a class="highlight-word" href="//grafana.com/profile/api-keys" target="_blank">Generate a new API key</a> or <a class="highlight-word" href="//grafana.com/signup" target="_blank">sign up for free.</a></p>

<form name="editForm">
	<div class="rt-dash-flex-container wp-warning-box--margin-bottom" ng-if="ctrl.appModel.jsonData.apiKeySet && ctrl.datasourceUpgrader.needsUpgrade()">
		<div class="rt-dash-flex-item rt-dash--warning">
			<div class="rt-CTA-item">
					<div class="rt-dashboard-icons-container">
							<i class="icon-gf icon-gf-alert rt-dashboard-icons-alert"></i>
					</div>
					<div class="rt-dashboard-icons-warning-container">
						<span>worldPing now supports Grafana Alerting!</span>
						<span class="rt-dash--warning-subcopy">To start using alerting, an update to your worldPing data source <strong>is required</strong>.</span>
						<a href="#" class="btn btn-inverse" ng-if="ctrl.datasourceUpgrader.canUpgrade()" ng-click="ctrl.datasourceUpgrader.upgrade()">Update now</a>
						<div class="rt-dash--warning-subcopy" ng-if="!ctrl.datasourceUpgrader.canUpgrade()">Please contact your admin to have them perform the update.</div>
					</div>
			</div>
		</div>
	</div>
	<div class="gf-form-group">
		<div class="gf-form-inline">
			<div class="gf-form wp-inline-field-margin--right">
				<a class="gf-form-label width-12" href="//grafana.com/profile/api-keys" target="_blank">Grafana.com API Key</a>
				<input type="password" class="gf-form-input input-xlarge" ng-model="ctrl.appModel.secureJsonData.apiKey" ng-if="!ctrl.appModel.jsonData.apiKeySet" required>
				<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="complete" ng-if="ctrl.appModel.jsonData.apiKeySet">
			</div>
			<div class="gf-form">
				<a class="btn btn-danger btn-small" href="#" ng-click="ctrl.reset()" ng-if="ctrl.appModel.jsonData.apiKeySet">reset</a>
			</div>
		</div>
		<div ng-if="ctrl.appModel.jsonData.apiKeySet && ctrl.validKey" class="wp-enabled-box">
			<i class="icon-gf icon-gf-check wp-icon-success"></i> worldPing is enabled. <strong>Next up: </strong><a href="dashboard/db/worldping-home" class="external-link">Go to worldPing Home Dashboard</a>
		</div>
		<div ng-if="ctrl.errorMsg">
			<div class="alert alert-error"><div class="alert-title ng-binding">Error</div><div>{{ctrl.errorMsg}}</div></div>
		</div>
	</div>
	<div class="gf-form-group" ng-if="ctrl.appModel.jsonData.apiKeySet && ctrl.org">
		<h3 class="page-heading">Account Details</h3>
		<div class="gf-form">
			<span class="gf-form-label width-12">Org Name</span>
			<span class="gf-form-label width-12">{{ctrl.org.name}}</span>
		</div>
		<div class="gf-form">
			<span class="gf-form-label width-12">Org Slug</span>
			<span class="gf-form-label width-12">{{ctrl.org.slug}}</span>
		</div>
		<div class="gf-form">
			<span class="gf-form-label width-12">Org ID</span>
			<span class="gf-form-label width-12">{{ctrl.org.id}}</span>
		</div>
		<div class="gf-form">
			<span class="gf-form-label width-12">Plan</span>
			<span class="gf-form-label width-12">{{ctrl.org.wpPlan || 'Free'}}</span>
		</div>
		<div class="gf-form">
			<span class="gf-form-label width-12">Est. Checks/Mo</span>
			<span class="gf-form-label width-12">{{ctrl.org.strChecksPerMonth}}</span>
		</div>
	</div>
</form>
